<template>
  <div class="back">
    <!-- 头部 -->
    <div class="header">
      <!-- 添加按钮 -->
      <el-button class="el-button-add" @click="addCustomer" size="small"
        >添加</el-button
      >
      <!-- 用户名输入框 -->
      <el-input
        class="el-input-name"
        size="mini"
        v-model="customeName"
        placeholder="请输入内容"
      ></el-input>
      <!-- 状态选择框 -->
      <el-select
        class="el-select-status"
        size="mini"
        v-model="customeStatus"
        clearable
        placeholder="请选择状态"
      >
        <el-option label="正常" value="正常"></el-option>
        <el-option label="禁用" value="禁用"></el-option>
      </el-select>
      <!-- 查询按钮 -->
      <el-button @click="findCustome" class="el-button-query" size="small"
        >查询</el-button
      >
    </div>
    <!-- 表格开始 -->
    <!-- 表格 -->
    <div class="center">
      <el-table
        size="mini"
        :data="tableData"
        stripe
        style="width: 100%; fontsize: 12px"
      >
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>
        <el-table-column prop="realname" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="telephone" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="180">
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color: #83cdd5"
              @click="editCustomer(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              style="color: red"
              type="text"
              size="small"
              @click="todelete(scope.row)"
              >删除</el-button
            >
            <el-button
              style="color: blue"
              type="text"
              size="small"
              @click="toDetails(scope.row.id)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->

    <!-- 分页组件开始 -->
    <div class="block">
      <el-pagination
        class="pagination"
        layout="prev, pager, next"
        :page-size="list.pageSize"
        :current-page="1"
        :total="total"
        @current-change="changeHandler"
      >
      </el-pagination>
    </div>
    <!-- 分页组件结束 -->
    <!-- 模态框开始 -->
    <el-dialog title="添加顾客信息" :visible.sync="dialogFormVisible">
      <el-form
        :model="customeForm"
        :rules="rules"
        ref="custome_form"
        label-width="100px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="customeForm.username"></el-input>
        </el-form-item>
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="customeForm.realname"></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="customeForm.telephone"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="customeForm.password"></el-input>
        </el-form-item>
        <!-- 性别 -->
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="customeForm.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="famale">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button
          class="el-button-sure"
          size="mini"
          type="primary"
          @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
    <!-- 编辑模态框 -->
    <el-dialog title="编辑顾客信息" :visible.sync="dialogFormVisible1">
      <el-form
        :model="customeForm1"
        :rules="rules1"
        ref="custome_form"
        label-width="100px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="customeForm1.username"></el-input>
        </el-form-item>
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="customeForm1.realname"></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="customeForm1.telephone"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="customeForm1.password"></el-input>
        </el-form-item>
        <!-- 性别 -->
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="customeForm1.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="famale">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 表单结束 -->
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button
          class="el-button-sure"
          size="mini"
          type="primary"
          @click="updataCustomer"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "../../utils/request";
export default {
  data() {
    return {
      // 用户名
      customeName: "",
      // 状态
      customeStatus: "",
      // 表格数据
      tableData: [],
      // 分页查询数据
      list: {
        page: 1,
        pageSize: 10,
        roleId: 6,
      },
      // 分页组件
      total: 30,
      //模态框默认不显示
      dialogFormVisible: false,
      dialogFormVisible1: false,
      // 模态框表单
      customeForm: {
        // 用户名称
        username: "",
        // 姓名
        realname: "",
        // 手机号
        telephone: "",
        // 密码
        password: "",
        // 性别
        gender: "",
      },
      // 模态框表单
      customeForm1: {
        // 用户名称
        username: "",
        // 姓名
        realname: "",
        // 手机号
        telephone: "",
        // 密码
        password: "",
        // 性别
        gender: "",
      },
      // 验证规则
      rules: {
        // 用户名
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        // 姓名
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // 手机号
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        // 密码
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
      // 编辑表单验证规则
      rules1: {
        // 用户名
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        // 姓名
        realname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        // 手机号
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        // 性别
        gedder: [{ message: "请选择性别", trigger: "change" }],
        // 密码
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
        // 状态
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      id: 1,
    };
  },
  computed: {},
  methods: {
    // 跳转
    toDetails(id) {
      this.$router.push({
        path: "/customerMana/details",
        query: { id },
      });
    },
    // 获取页面数据 
    getAllCustomer() {
      // console.log(this.list);
      get("/baseUser/pageQuery", this.list).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    getAllInfo() {
      get("/baseUser/cascadeRoleFindAll").then((res) => {
        console.log(res.data.length - 1);
        this.id = res.data[res.data.length - 1].id;
      });
    },
    // getAllCustomer() {
    //   get("/baseUser/cascadeRoleFindAll").then((res) => {
    //     console.log(res.data.length);
    //     this.tableData = res.data;
    //     this.total = res.data.length;
    //     // this.total = res.data.total;
    //     // console.log(this.total);
    //   });
    // },
    // 分页组件绑定事件
    changeHandler(page) {
      this.list.page = page;
      this.getAllCustomer();
    },
    // 增加顾客
    addCustomer() {
      // 模态框显示
      this.dialogFormVisible = true;
    },
    // 关闭模态框
    closeDialog() {
      // 关闭模态框
      this.dialogFormVisible = false;
      // 重置表单
      this.$refs["custome_form"].resetFields();
    },
    // 设置权限
    roleSet() {
      let data = { roles: 6, id: this.id };
      console.log(data);
      post("/baseUser/setRoles", data);
    },
    // 提交表单
    submitForm() {
      // console.log(this.customeForm);
      post("/baseUser/saveOrUpdate", this.customeForm).then((res) => {
        this.getAllInfo();
        setTimeout(() => {
          this.roleSet();
        }, 300);
        setTimeout(() => {
          this.getAllCustomer();
          this.closeDialog();
        }, 100);
      });
    },
    // 查询
    findCustome() {
      // console.log(1);
      this.list.username = this.customeName;
      this.list.status = this.customeStatus;
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in this.list) {
        if (!this.list[key]) {
          delete this.list[key];
        }
      }
      // 将页数强制回到第一页
      this.currentPage = 1;
      // 重新加载顾客数据
      this.getAllCustomer();
    },
    // 编辑用户信息
    editCustomer(row) {
      this.customeForm1 = { ...row };
      this.dialogFormVisible1 = true;
    },
    // 更新用户信息
    updataCustomer() {
      post("/baseUser/saveOrUpdate", this.customeForm1).then((res) => {
        // console.log(res);
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getAllCustomer();
          this.dialogFormVisible1 = false;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 删除
    todelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const id = row.id;
        const res = await get("/baseUser/deleteById", { id }).then(
          (response) => {
            this.$message({ type: "success", message: response.message });
            // console.log(res);
            this.getAllCustomer();
          }
        );
      });
    },
  },
  created() {
    this.getAllCustomer();
  },
  mounted() {},
};
</script>
<style scoped>
/* 样式   按钮：添加 查询 */
.el-button-sure,
.el-button-add,
.el-button-query {
  background-color: #409eff;
  color: white;
}
.el-button-query {
  margin-left: 15px;
}
/* 样式   输入框：用户名 选择框：状态 */
.el-input-name,
.el-select-status {
  width: 200px;
  padding-left: 15px;
}
.center {
  padding-top: 20px;
}
.pagination {
  padding-top: 10px;
  margin-left: 1000px;
}
</style>